---
export interface Props {
	id: string;
	initial?: boolean;
}

const { id, initial } = Astro.props;
---

<li>
	<a href={'#' + id} data-initial={initial} class="tab-link">
		<slot />
	</a>
</li>

<style>
	a {
		fill: var(--sl-color-gray-2);
	}

	a[aria-selected='true'] {
		position: relative;
		z-index: 1;
		background-color: var(--sl-color-gray-6);
		box-shadow: 0px 0px 0px 1px var(--sl-color-gray-5);
		border-radius: 0.25rem 0.25rem 0 0;
		fill: var(--sl-color-white);
	}
	a[aria-selected='true']::after {
		content: '';
		width: 100%;
		height: 1px;
		bottom: 0;
		transform: translateY(1px);
		background-color: var(--sl-color-gray-6);
		position: absolute;
	}
</style>
